<template>
  <view>
    <biaotou title="勘验笔录"></biaotou>
    <inputForm v-model="form" ref="form" :list="list">
      <template v-slot:现场路产损失>
        <view class="tn-flex tn-flex-row-center tn-padding-xl"
              style="position: relative;padding: 0;">
          <tn-button style="position: absolute;right: 0;top: -40px;" @click="$refs.luchan.showPoppup"
                     backgroundColor="tn-bg-blue" fontColor="tn-color-white">添加
          </tn-button>
        </view>
        <luchangtianjia ref="luchan" @total="setTotal" @listChange="setRoadPriceList"/>
      </template>
    </inputForm>
  </view>
</template>

<script>
import inputForm from "@/components/inputForm.vue";

import Luchantianjia from "./luchantianjia.vue";
import Biaotou from "./biaotou.vue";
import {getRoadAndHeadByDepartId, selectDicByCode} from "../../../api/lupeiwenshu";

export default {
  components: {
    Biaotou,
    inputForm,
    luchangtianjia: Luchantianjia
  },
  data() {
    return {
      form: {
        caseReason: '因发生交通事故',
        weather: '晴',
        repairType: '以上设施已损毁，无法正常使用，需要更换和修复',
        locat: '2923522278163456',
        kNumStart: "K",
        mNumStart: "",
        kNumEnd: "K",
        mNumEnd: "",
        payMoney: 0,
        roadPriceList:[]
      },
      list: [
        {
          label: '案件原因：',
          prop: 'caseReason',
          type: 'select',
          props: {
            label: 'name',
            value: 'name'
          },
          dicData: []
        },
        {
          label: '天气：',
          prop: 'weather',
          type: 'select',
          props: {
            label: 'name',
            value: 'name'
          },
          dicData: []
        }, {
          label: '勘验地点：',
          prop: 'locat',
          type: "select",
          props: {
            label: 'roadName',
            value: 'id'
          },
          dicData: []
        },
        {
          label: '开始桩号：',
          prop: 'kNumStart',
          prop2: 'mNumStart',
          type: "mileage"
        },
        {
          label: '结束桩号：',
          prop: 'kNumEnd',
          prop2: 'mNumEnd',
          type: "mileage"
        },
        {
          label: '路产修复方式：',
          prop: 'repairType',
          labelWidth: 250,
          type: "select",
          props: {
            label: 'name',
            value: 'name'
          },
          dicData: []
        },
        {
          label: '现场路产损失：',
          prop: '现场路产损失',
          type: "slot",
          labelWidth: 250,
          labelPosition: 'top'
        },
        {
          label: '赔偿金额：',
          prop: 'payMoney',
          unit: "元"
        }
      ],
      rules: {
        caseReason: [
          {
            required: true,
            message: "请输入"
          }
        ]
      }
    };
  },
  methods: {
    async initSelectJson() {
      this.list.find(item => item.label === '案件原因：').dicData = (await selectDicByCode('ajyy')).data;
      this.list.find(item => item.label === '天气：').dicData = (await selectDicByCode('tq')).data;
      this.list.find(item => item.label === '勘验地点：').dicData = (await getRoadAndHeadByDepartId()).data;
      this.list.find(item => item.label === '路产修复方式：').dicData = (await selectDicByCode('lcxf')).data;
    },

    setTotal(total) {
      this.form.payMoney = total;
    },
    setRoadPriceList(arr){
      this.form.roadPriceList = arr;
    },
    submit() {
      this.$refs.form.$refs.form.validate(valid => {
        if (valid) {
          console.log('验证通过');
        } else {
          console.log('验证失败');
        }
      });
    },
    setList(){
       this.$refs.luchan.arr = this.form.roadPriceList
    }
  }
  ,
  mounted() {
    this.initSelectJson()
    // this.$refs.form.$refs.form.setRules(this.rules);
  }
  ,

}
;
</script>
